<!-- Header -->
<div id="header" class="main-window-segment header-segment bottom-padded" style="border: none">
    
    <div class="container-fluid">
        
        <div class="row">

            <div class="col-lg-8 col-md-6 col-sm-12">

                <h2 style="margin-bottom: none !important; padding-bottom: none !important;"><?php echo $this->content->title; ?></h2>
                <p style="margin: none !important; padding: none !important;"><?php echo $this->content->subtitle; ?></p>

            </div>
            
            <div class="hidden-xs hidden-sm col-lg-4 col-md-6 col-sm-12 top-padded align-right">

                <?php if (isset($this->content->display_to_micro)) { 
                    if(Session::get('ta')=='2015') { ?>
                    <a href="<?php echo URL; ?>dashboard/overviewMenkeu" class="btn btn-default"><h3 style="padding: 0; margin: 0 0 4px 0;"><span class="glyphicon glyphicon-stats"></span></h3> &nbsp;Realisasi APBN</a>
                <?php }} ?>

                <?php if (isset($this->content->display_to_macro)) { 
                    if(Session::get('ta')=='2015') { ?>
                    <a href="<?php echo URL; ?>dashboard/overviewMakroMenkeu" class="btn btn-default"><h3 style="padding: 0; margin: 0 0 4px 0;"><span class="glyphicon glyphicon-dashboard"></span></h3> &nbsp;Makroekonomi</a>
                <?php }} ?>

                <?php if (isset($this->content->display_to_market)) { 
                    if(Session::get('ta')=='2015') { ?>
                    <a href="<?php echo URL; ?>dashboard/overviewMarketMenkeu" class="btn btn-default"><h3 style="padding: 0; margin: 0 0 4px 0;"><span class="glyphicon glyphicon-eye-open"></span></h3> &nbsp;Market Watch</a>
                <?php }} ?>

            </div>
            
            <div class="hidden-md hidden-lg col-sm-12 top-padded">

                <?php if (isset($this->content->display_to_micro)) { 
                    if(Session::get('ta')=='2015') { ?>
                    <a href="<?php echo URL; ?>dashboard/overviewMenkeu"class="btn btn-default"><span class="glyphicon glyphicon-stats"></span> &nbsp;Realisasi APBN</a>
                <?php }} ?>

                <?php if (isset($this->content->display_to_macro)) { 
                    if(Session::get('ta')=='2015') { ?>
                    <a href="<?php echo URL; ?>dashboard/overviewMakroMenkeu" class="btn btn-default"><span class="glyphicon glyphicon-dashboard"></span> &nbsp;Makroekonomi</a>
                <?php }} ?>

                <?php if (isset($this->content->display_to_market)) { 
                    if(Session::get('ta')=='2015') { ?>
                    <a href="<?php echo URL; ?>dashboard/overviewMarketMenkeu" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> &nbsp;Market Watch</a>
                <?php }} ?>

            </div>
            
        </div>

    </div>
    
</div>

<?php if (isset($this->content->market_watch_data)) { ?>

    <div id="market-watch-ticker" class="main-window-segment sub-segment" style="background: #333; color: #fff; overflow-x: hidden; font-size: 1.2em; font-weight: bold;">

        <div id="ticker-content" style="display: block; float: left; padding: 10px; white-space: nowrap; position: relative; left: 0px;"><span id="ticker-text-a"></span><span id="ticker-text-b">Mengambil data...</span></div>

    </div>

    <div id="market-watch" class="main-window-segment sub-segment">

        <div class="container-fluid">

            <div class="row">

                <!-- Left Column -->

                <div id="idr-block" class="col-lg-3 col-md-12">

                    <div class="group-tile">

                        <div class="container-fluid">

                            <div class="row">
                        
                                <div class="col-xs-12">
                                    <div class="subtile">
                                        <div id="idr-gauge" class="subtile-segment bordered">
                                            <div class="subtile-half bordered" style="width: 60%">
                                                <div class="subtile-half-fill" id="idr-gauge-info">
                                                    <h4>Nilai Tukar USD</h4>
                                                    <h5 id="idr-value-info">0.00 IDR</h5>
                                                    <h6 id="idr-updown-info">0.00</h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 40%">
                                                <div id="idr-gauge-canvas"></div>
                                            </div>
                                        </div>
                                        <div id="idr-line" class="subtile-segment">
                                            <div class="subtile-full">
                                                <div id="idr-line-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xs-12">
                                    <div id="idr-table" class="market-table">
                                        <table class="table table-condensed" id="exchange-forex-table" style="font-size: 85%;">
                                            
                                        </table>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Center Column -->

                <div id="multi-block" class="col-lg-6 col-md-12">

                    <div class="group-tile">

                        <div class="container-fluid">

                            <div class="row">

                                <div class="grouptile-title col-xs-12"><h4>Komoditas</h4></div>

                            </div>

                            <div class="row">

                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="coal-gauge-info">
                                                    <h4>Coal</h4>
                                                    <h5 id="coal-value-info"></h5>
                                                    <h6 id="coal-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="coal-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="wti-gauge-info">
                                                    <h4>WTI</h4>
                                                    <h5 id="wti-value-info"></h5>
                                                    <h6 id="wti-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="wti-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="gas-gauge-info">
                                                    <h4>Gas</h4>
                                                    <h5 id="gas-value-info"></h5>
                                                    <h6 id="gas-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="gas-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="gold-gauge-info">
                                                    <h4>Gold</h4>
                                                    <h5 id="gold-value-info"></h5>
                                                    <h6 id="gold-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="gold-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="wheat-gauge-info">
                                                    <h4>Wheat</h4>
                                                    <h5 id="wheat-value-info"></h5>
                                                    <h6 id="wheat-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="wheat-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="cpo-gauge-info">
                                                    <h4>CPO</h4>
                                                    <h5 id="cpo-value-info"></h5>
                                                    <h6 id="cpo-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="cpo-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>                  

                            </div>

                            <div class="row">

                                <div class="grouptile-title col-xs-12"><br/><h4>Obligasi (Persentase)</h4></div>

                            </div>

                            <div class="row">

                                <div class="col-lg-4 col-md-4 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="indo-gauge-info">
                                                    <h4>INDO 10Y</h4>
                                                    <h5 id="indo-value-info"></h5>
                                                    <h6 id="indo-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="indo-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6">
                                    
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="ust-gauge-info">
                                                    <h4>UST 10Y</h4>
                                                    <h5 id="ust-value-info"></h5>
                                                    <h6 id="ust-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="ust-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="cds-gauge-info">
                                                    <h4>CDS 10Y</h4>
                                                    <h5 id="cds-value-info"></h5>
                                                    <h6 id="cds-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="cds-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="sun5-gauge-info">
                                                    <h4>SUN 5Y</h4>
                                                    <h5 id="sun5-value-info"></h5>
                                                    <h6 id="sun5-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="sun5-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6">
                                    <div class="subtile">
                                        <div class="subtile-segment">
                                            <div class="subtile-half bordered" style="width: 50%">
                                                <div class="subtile-half-fill subtile-small" id="sun10-gauge-info">
                                                    <h4>SUN 10Y</h4>
                                                    <h5 id="sun10-value-info"></h5>
                                                    <h6 id="sun10-updown-info"></h6>
                                                </div>
                                            </div>
                                            <div class="subtile-half" style="width: 50%">
                                                <div id="sun10-gauge-canvas" class="multi-gauge-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>          

                            </div>

                        </div>  

                    </div>  

                </div>

                <!-- Right Column -->

                <div id="ihsg-block" class="col-lg-3 col-md-12">

                    <div class="group-tile">

                        <div class="container-fluid">

                            <div class="row">
                        
                                <div class="col-xs-12">
                                    <div class="subtile">
                                        <div id="ihsg-gauge" class="subtile-segment bordered">
                                            <div class="subtile-half bordered" style="width: 40%">
                                                <div id="ihsg-gauge-canvas"></div>
                                            </div>
                                            <div class="subtile-half" style="width: 60%">
                                                <div class="subtile-half-fill" id="ihsg-gauge-info">
                                                    <h4>IHSG</h4>
                                                    <h5 id="ihsg-value-info">0.00</h5>
                                                    <h6 id="ihsg-updown-info">0.00</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="ihsg-line" class="subtile-segment">
                                            <div class="subtile-full">
                                                <div id="ihsg-line-canvas"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xs-12">
                                    <div id="ihsg-table" class="market-table">
                                        <table class="table table-condensed" id="exchange-indexes-table" style="font-size: 85%;">
                                            
                                        </table>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

<?php } ?>

<script type="text/javascript">

    //Init

    idrGaugeConfigArray = [];
    ihsgGaugeConfigArray = [];

    coalGaugeConfigArray = [];
    wtiGaugeConfigArray = [];
    gasGaugeConfigArray = [];
    goldGaugeConfigArray = [];
    wheatGaugeConfigArray = [];
    cpoGaugeConfigArray = [];

    indoGaugeConfigArray = [];
    ustGaugeConfigArray = [];
    cdsGaugeConfigArray = [];
    sun5GaugeConfigArray = [];
    sun10GaugeConfigArray = [];

    lineChartIDR = false;
    lineChartIHSG = false;

    lineIDRLabels = [];
    lineIDRValues = ['IDR'];

    lineIHSGLabels = [];
    lineIHSGValues = ['IHSG'];

    function lineArrange() {

        $('#idr-line-canvas').removeAttr('height');
        $('#ihsg-line-canvas').removeAttr('height');

        $('#idr-line-canvas').removeAttr('style');
        $('#ihsg-line-canvas').removeAttr('style');

        if ($('#idr-block').innerWidth() < $('#multi-block').innerWidth()) {

            idrHeight = 0;
            ihsgHeight = 0;

            idrHeight = $('#multi-block').innerHeight() - $('#idr-gauge').innerHeight() - $('#idr-table').innerHeight() -84;
            ihsgHeight = $('#multi-block').innerHeight() - $('#ihsg-gauge').innerHeight() - $('#ihsg-table').innerHeight() - 84;

            $('#idr-line-canvas').css('height', idrHeight + 'px');
            $('#ihsg-line-canvas').css('height', ihsgHeight + 'px');

            $('#idr-line-canvas').attr('height', idrHeight);
            $('#ihsg-line-canvas').attr('height', ihsgHeight);

        } else {

            $('#idr-line-canvas').css('height', '200px');
            $('#ihsg-line-canvas').css('height', '200px');

            $('#idr-line-canvas').attr('height', '200');
            $('#ihsg-line-canvas').attr('height', '200');

        }

    }

    function renderGaugeIDR() {

        dialSize = $('#idr-gauge-canvas').innerWidth();

        var dialConfigIDR = 

            {
                size: dialSize,

                label: '',

                min : Number(idrGaugeConfigArray[6]),
                max : Number(idrGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(idrGaugeConfigArray[6]), 
                        to: Number(idrGaugeConfigArray[8])
                    },

                    { 
                        from: Number(idrGaugeConfigArray[11]), 
                        to: Number(idrGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(idrGaugeConfigArray[8]), 
                        to: Number(idrGaugeConfigArray[9])
                    },

                    { 
                        from: Number(idrGaugeConfigArray[10]), 
                        to: Number(idrGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(idrGaugeConfigArray[9]), 
                        to: Number(idrGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartIDR = new Gauge('idr-gauge-canvas', dialConfigIDR);
        dialChartIDR.render();
        dialChartIDR.redraw(Number(idrGaugeConfigArray[2]), 500);

    }

    function renderGaugeIHSG() {

        dialSize = $('#ihsg-gauge-canvas').innerWidth();

        var dialConfigIHSG = 

            {
                size: dialSize,

                label: '',

                min : Number(ihsgGaugeConfigArray[6]),
                max : Number(ihsgGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(ihsgGaugeConfigArray[6]), 
                        to: Number(ihsgGaugeConfigArray[8])
                    },

                    { 
                        from: Number(ihsgGaugeConfigArray[11]), 
                        to: Number(ihsgGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(ihsgGaugeConfigArray[8]), 
                        to: Number(ihsgGaugeConfigArray[9])
                    },

                    { 
                        from: Number(ihsgGaugeConfigArray[10]), 
                        to: Number(ihsgGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(ihsgGaugeConfigArray[9]), 
                        to: Number(ihsgGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartIHSG = new Gauge('ihsg-gauge-canvas', dialConfigIHSG);
        dialChartIHSG.render();
        dialChartIHSG.redraw(Number(ihsgGaugeConfigArray[2]), 500);

    }

    function renderGaugeCoal() {

        dialSize = $('#coal-gauge-canvas').innerWidth();

        var dialConfigCoal = 

            {
                size: dialSize,

                label: '',

                min : Number(coalGaugeConfigArray[6]),
                max : Number(coalGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(coalGaugeConfigArray[6]), 
                        to: Number(coalGaugeConfigArray[8])
                    },

                    { 
                        from: Number(coalGaugeConfigArray[11]), 
                        to: Number(coalGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(coalGaugeConfigArray[8]), 
                        to: Number(coalGaugeConfigArray[9])
                    },

                    { 
                        from: Number(coalGaugeConfigArray[10]), 
                        to: Number(coalGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(coalGaugeConfigArray[9]), 
                        to: Number(coalGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartCoal = new Gauge('coal-gauge-canvas', dialConfigCoal);
        dialChartCoal.render();
        dialChartCoal.redraw(Number(coalGaugeConfigArray[2]), 500);

    }

    function renderGaugeWTI() {

        dialSize = $('#wti-gauge-canvas').innerWidth();

        var dialConfigWTI = 

            {
                size: dialSize,

                label: '',

                min : Number(wtiGaugeConfigArray[6]),
                max : Number(wtiGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(wtiGaugeConfigArray[6]), 
                        to: Number(wtiGaugeConfigArray[8])
                    },

                    { 
                        from: Number(wtiGaugeConfigArray[11]), 
                        to: Number(wtiGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(wtiGaugeConfigArray[8]), 
                        to: Number(wtiGaugeConfigArray[9])
                    },

                    { 
                        from: Number(wtiGaugeConfigArray[10]), 
                        to: Number(wtiGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(wtiGaugeConfigArray[9]), 
                        to: Number(wtiGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartWTI = new Gauge('wti-gauge-canvas', dialConfigWTI);
        dialChartWTI.render();
        dialChartWTI.redraw(Number(wtiGaugeConfigArray[2]), 500);

    }

    function renderGaugeGas() {

        dialSize = $('#gas-gauge-canvas').innerWidth();

        var dialConfigGas = 

            {
                size: dialSize,

                label: '',

                min : Number(gasGaugeConfigArray[6]),
                max : Number(gasGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(gasGaugeConfigArray[9]), 
                        to: Number(gasGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(gasGaugeConfigArray[8]), 
                        to: Number(gasGaugeConfigArray[9])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(gasGaugeConfigArray[6]), 
                        to: Number(gasGaugeConfigArray[8])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartGas = new Gauge('gas-gauge-canvas', dialConfigGas);
        dialChartGas.render();
        dialChartGas.redraw(Number(gasGaugeConfigArray[2]), 500);

    }

    function renderGaugeGold() {

        dialSize = $('#gold-gauge-canvas').innerWidth();

        var dialConfigGold = 

            {
                size: dialSize,

                label: '',

                min : Number(goldGaugeConfigArray[6]),
                max : Number(goldGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(goldGaugeConfigArray[6]), 
                        to: Number(goldGaugeConfigArray[8])
                    },

                    { 
                        from: Number(goldGaugeConfigArray[11]), 
                        to: Number(goldGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(goldGaugeConfigArray[8]), 
                        to: Number(goldGaugeConfigArray[9])
                    },

                    { 
                        from: Number(goldGaugeConfigArray[10]), 
                        to: Number(goldGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(goldGaugeConfigArray[9]), 
                        to: Number(goldGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartGold = new Gauge('gold-gauge-canvas', dialConfigGold);
        dialChartGold.render();
        dialChartGold.redraw(Number(goldGaugeConfigArray[2]), 500);

    }

    function renderGaugeWheat() {

        dialSize = $('#wheat-gauge-canvas').innerWidth();

        var dialConfigWheat = 

            {
                size: dialSize,

                label: '',

                min : Number(wheatGaugeConfigArray[6]),
                max : Number(wheatGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(wheatGaugeConfigArray[9]), 
                        to: Number(wheatGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(wheatGaugeConfigArray[8]), 
                        to: Number(wheatGaugeConfigArray[9])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(wheatGaugeConfigArray[6]), 
                        to: Number(wheatGaugeConfigArray[8])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartWheat = new Gauge('wheat-gauge-canvas', dialConfigWheat);
        dialChartWheat.render();
        dialChartWheat.redraw(Number(wheatGaugeConfigArray[2]), 500);

    }

    function renderGaugeCPO() {

        dialSize = $('#cpo-gauge-canvas').innerWidth();

        var dialConfigCPO = 

            {
                size: dialSize,

                label: '',

                min : Number(cpoGaugeConfigArray[6]),
                max : Number(cpoGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(cpoGaugeConfigArray[6]), 
                        to: Number(cpoGaugeConfigArray[8])
                    },

                    { 
                        from: Number(cpoGaugeConfigArray[11]), 
                        to: Number(cpoGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(cpoGaugeConfigArray[8]), 
                        to: Number(cpoGaugeConfigArray[9])
                    },

                    { 
                        from: Number(cpoGaugeConfigArray[10]), 
                        to: Number(cpoGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(cpoGaugeConfigArray[9]), 
                        to: Number(cpoGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartCPO = new Gauge('cpo-gauge-canvas', dialConfigCPO);
        dialChartCPO.render();
        dialChartCPO.redraw(Number(cpoGaugeConfigArray[2]), 500);

    }

    function renderGaugeINDO() {

        dialSize = $('#indo-gauge-canvas').innerWidth();

        var dialConfigINDO = 

            {
                size: dialSize,

                label: '',

                min : Number(indoGaugeConfigArray[6]),
                max : Number(indoGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(indoGaugeConfigArray[6]), 
                        to: Number(indoGaugeConfigArray[8])
                    },

                    { 
                        from: Number(indoGaugeConfigArray[11]), 
                        to: Number(indoGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(indoGaugeConfigArray[8]), 
                        to: Number(indoGaugeConfigArray[9])
                    },

                    { 
                        from: Number(indoGaugeConfigArray[10]), 
                        to: Number(indoGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(indoGaugeConfigArray[9]), 
                        to: Number(indoGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartINDO = new Gauge('indo-gauge-canvas', dialConfigINDO);
        dialChartINDO.render();
        dialChartINDO.redraw(Number(indoGaugeConfigArray[2]), 500);

    }

    function renderGaugeUST() {

        dialSize = $('#ust-gauge-canvas').innerWidth();

        var dialConfigUST = 

            {
                size: dialSize,

                label: '',

                min : Number(ustGaugeConfigArray[6]),
                max : Number(ustGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(ustGaugeConfigArray[6]), 
                        to: Number(ustGaugeConfigArray[8])
                    },

                    { 
                        from: Number(ustGaugeConfigArray[11]), 
                        to: Number(ustGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(ustGaugeConfigArray[8]), 
                        to: Number(ustGaugeConfigArray[9])
                    },

                    { 
                        from: Number(ustGaugeConfigArray[10]), 
                        to: Number(ustGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(ustGaugeConfigArray[9]), 
                        to: Number(ustGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartUST = new Gauge('ust-gauge-canvas', dialConfigUST);
        dialChartUST.render();
        dialChartUST.redraw(Number(ustGaugeConfigArray[2]), 500);

    }

    function renderGaugeCDS() {

        dialSize = $('#cds-gauge-canvas').innerWidth();

        var dialConfigCDS = 

            {
                size: dialSize,

                label: '',

                min : Number(cdsGaugeConfigArray[6]),
                max : Number(cdsGaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(cdsGaugeConfigArray[6]), 
                        to: Number(cdsGaugeConfigArray[8])
                    },

                    { 
                        from: Number(cdsGaugeConfigArray[11]), 
                        to: Number(cdsGaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(cdsGaugeConfigArray[8]), 
                        to: Number(cdsGaugeConfigArray[9])
                    },

                    { 
                        from: Number(cdsGaugeConfigArray[10]), 
                        to: Number(cdsGaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(cdsGaugeConfigArray[9]), 
                        to: Number(cdsGaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartCDS = new Gauge('cds-gauge-canvas', dialConfigCDS);
        dialChartCDS.render();
        dialChartCDS.redraw(Number(cdsGaugeConfigArray[2]), 500);

    }

    function renderGaugeSUN5() {

        dialSize = $('#sun5-gauge-canvas').innerWidth();

        var dialConfigSUN5 = 

            {
                size: dialSize,

                label: '',

                min : Number(sun5GaugeConfigArray[6]),
                max : Number(sun5GaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(sun5GaugeConfigArray[6]), 
                        to: Number(sun5GaugeConfigArray[8])
                    },

                    { 
                        from: Number(sun5GaugeConfigArray[11]), 
                        to: Number(sun5GaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(sun5GaugeConfigArray[8]), 
                        to: Number(sun5GaugeConfigArray[9])
                    },

                    { 
                        from: Number(sun5GaugeConfigArray[10]), 
                        to: Number(sun5GaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(sun5GaugeConfigArray[9]), 
                        to: Number(sun5GaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartSUN5 = new Gauge('sun5-gauge-canvas', dialConfigSUN5);
        dialChartSUN5.render();
        dialChartSUN5.redraw(Number(sun5GaugeConfigArray[2]), 500);

    }

    function renderGaugeSUN10() {

        dialSize = $('#sun10-gauge-canvas').innerWidth();

        var dialConfigSUN10 = 

            {
                size: dialSize,

                label: '',

                min : Number(sun10GaugeConfigArray[6]),
                max : Number(sun10GaugeConfigArray[7]),

                redZones: [

                    { 
                        from: Number(sun10GaugeConfigArray[6]), 
                        to: Number(sun10GaugeConfigArray[8])
                    },

                    { 
                        from: Number(sun10GaugeConfigArray[11]), 
                        to: Number(sun10GaugeConfigArray[7])
                    }

                ],

                yellowZones: [

                    { 
                        from: Number(sun10GaugeConfigArray[8]), 
                        to: Number(sun10GaugeConfigArray[9])
                    },

                    { 
                        from: Number(sun10GaugeConfigArray[10]), 
                        to: Number(sun10GaugeConfigArray[11])
                    }

                ],

                greenZones: [

                    { 
                        from: Number(sun10GaugeConfigArray[9]), 
                        to: Number(sun10GaugeConfigArray[10])
                    }

                ],

                minorTicks: 5,

                minMaxTextColor: '#fff',

                mainNumberTextColor: '#fff'
            }

        dialChartSUN10 = new Gauge('sun10-gauge-canvas', dialConfigSUN10);
        dialChartSUN10.render();
        dialChartSUN10.redraw(Number(sun10GaugeConfigArray[2]), 500);

    }

    function renderLineIDR() {

        lineArrange();

        lineChartIDR = c3.generate({

            bindto: '#idr-line-canvas',

            padding: {
                right: 5
            },

            data: {
                columns: [
                    lineIDRValues
                ]
            },

            axis: {

                x: {
                    type: 'category',
                    height: 40,
                    categories: lineIDRLabels,
                    tick: {
                        rotate: 90, 
                        multiline: false
                    }
                },

            },

            legend: {
                show: false
            },

            point: {
                show: false
            }

        });

    }

    function renderLineIHSG() {

        lineArrange();

        lineChartIHSG = c3.generate({

            bindto: '#ihsg-line-canvas',

            padding: {
                right: 5
            },

            data: {
                columns: [
                    lineIHSGValues
                ]
            },

            axis: {

                x: {
                    type: 'category',
                    height: 40,
                    categories: lineIHSGLabels,
                    tick: {
                        rotate: 90, 
                        multiline: false
                    }
                },

            },

            legend: {
                show: false
            },

            point: {
                show: false
            }

        });

    }

    function getStocksData() {

        $.getJSON('http://mdashboard.fiskal.depkeu.go.id/source/api/chart/xml/id/saham', function(result) {

            if (result.success == 'true') {

                $('#exchange-indexes-table').empty();

                $('#exchange-indexes-table').append('<thead><tr><th class="align-left">Saham</th><th class="align-right">Buka</th><th class="align-right">Sekarang</th><th class="align-right">Beda</th><th class="align-center">+/-</th></tr></thead>');

                $.each(result.data.row, function(key, value) {

                    rowHTML = '';

                    if (value.column[0] == 'IHSG') {

                        rowHTML += '<tr class="warning">';

                    } else {

                        rowHTML += '<tr>';

                    }

                    rowHTML += '<td class="align-left">' + value.column[0] + '</td>'; //Saham
                    rowHTML += '<td class="align-right">' + value.column[1] + '</td>'; //Buka
                    rowHTML += '<td class="align-right">' + value.column[2] + '</td>'; //Sekarang
                    rowHTML += '<td class="align-right">' + Math.round((value.column[2] - value.column[1]) * 100) / 100 + '</td>'; //Beda
                    rowHTML += '<td class="align-center"></td>'; //+/-

                    rowHTML += '</tr>';

                    $('#exchange-indexes-table').append(rowHTML);

                });

            }

        });

    }

    function getForexData() {

        $.getJSON('http://mdashboard.fiskal.depkeu.go.id/source/api/chart/xml/id/kurs', function(result) {

            if (result.success == 'true') {

                $('#exchange-forex-table').empty();

                $('#exchange-forex-table').append('<thead><tr><th class="align-left">Kurs</th><th class="align-right">Buka</th><th class="align-right">Sekarang</th><th class="align-right">Beda</th><th class="align-center">+/-</th></tr></thead>');

                $.each(result.data.row, function(key, value) {

                    rowHTML = '';

                    if (value.column[0] == 'IDR') {

                        rowHTML += '<tr class="warning">';

                    } else {

                        rowHTML += '<tr>';

                    }

                    rowHTML += '<td class="align-left">' + value.column[0] + '</td>'; //Kurs
                    rowHTML += '<td class="align-right">' + value.column[1] + '</td>'; //Buka
                    rowHTML += '<td class="align-right">' + value.column[2] + '</td>'; //Sekarang
                    rowHTML += '<td class="align-right">' + Math.round((value.column[2] - value.column[1]) * 100) / 100 + '</td>'; //Beda
                    rowHTML += '<td class="align-center"></td>'; //+/-

                    rowHTML += '</tr>';

                    $('#exchange-forex-table').append(rowHTML);

                });

            }

        });

    }

    function getMultiGaugeData() {

        $.getJSON('http://mdashboard.fiskal.depkeu.go.id/source/api/chart/xml/id/multi', function(result) {

            if (result.success == 'true') {

                //IDR

                if (idrGaugeConfigArray.length == 0) {
                    idrGaugeConfigArray = result.data.row[8].column;
                    renderGaugeIDR();
                } else {
                    dialChartIDR.redraw(Number(idrGaugeConfigArray[2]), 500);
                }

                $('#idr-value-info').empty();
                $('#idr-value-info').append(Number(idrGaugeConfigArray[2]) + ' IDR');

                $('#idr-updown-info').empty();
                $('#idr-updown-info').append(Number(idrGaugeConfigArray[5]) + '');

                //IHSG

                if (ihsgGaugeConfigArray.length == 0) {
                    ihsgGaugeConfigArray = result.data.row[9].column;
                    renderGaugeIHSG();
                } else {
                    dialChartIHSG.redraw(Number(ihsgGaugeConfigArray[2]), 500);
                }

                $('#ihsg-value-info').empty();
                $('#ihsg-value-info').append(Number(ihsgGaugeConfigArray[2]) + '');

                $('#ihsg-updown-info').empty();
                $('#ihsg-updown-info').append(Number(ihsgGaugeConfigArray[5]) + '');

                //Coal

                if (coalGaugeConfigArray.length == 0) {
                    coalGaugeConfigArray = result.data.row[1].column;
                    renderGaugeCoal();
                } else {
                    dialChartCoal.redraw(Number(coalGaugeConfigArray[2]), 500);
                }

                $('#coal-value-info').empty();
                $('#coal-value-info').append(Number(coalGaugeConfigArray[2]) + '');

                $('#coal-updown-info').empty();
                $('#coal-updown-info').append(Number(coalGaugeConfigArray[5]) + '');

                //WTI

                if (wtiGaugeConfigArray.length == 0) {
                    wtiGaugeConfigArray = result.data.row[0].column;
                    renderGaugeWTI();
                } else {
                    dialChartWTI.redraw(Number(wtiGaugeConfigArray[2]), 500);
                }

                $('#wti-value-info').empty();
                $('#wti-value-info').append(Number(wtiGaugeConfigArray[2]) + '');

                $('#wti-updown-info').empty();
                $('#wti-updown-info').append(Number(wtiGaugeConfigArray[5]) + '');

                //Gas

                if (gasGaugeConfigArray.length == 0) {
                    gasGaugeConfigArray = result.data.row[2].column;
                    renderGaugeGas();
                } else {
                    dialChartGas.redraw(Number(gasGaugeConfigArray[2]), 500);
                }

                $('#gas-value-info').empty();
                $('#gas-value-info').append(Number(gasGaugeConfigArray[2]) + '');

                $('#gas-updown-info').empty();
                $('#gas-updown-info').append(Number(gasGaugeConfigArray[5]) + '');

                //Gold

                if (goldGaugeConfigArray.length == 0) {
                    goldGaugeConfigArray = result.data.row[3].column;
                    renderGaugeGold();
                } else {
                    dialChartGold.redraw(Number(goldGaugeConfigArray[2]), 500);
                }

                $('#gold-value-info').empty();
                $('#gold-value-info').append(Number(goldGaugeConfigArray[2]) + '');

                $('#gold-updown-info').empty();
                $('#gold-updown-info').append(Number(goldGaugeConfigArray[5]) + '');

                //Wheat

                if (wheatGaugeConfigArray.length == 0) {
                    wheatGaugeConfigArray = result.data.row[4].column;
                    renderGaugeWheat();
                } else {
                    dialChartWheat.redraw(Number(wheatGaugeConfigArray[2]), 500);
                }

                $('#wheat-value-info').empty();
                $('#wheat-value-info').append(Number(wheatGaugeConfigArray[2]) + '');

                $('#wheat-updown-info').empty();
                $('#wheat-updown-info').append(Number(wheatGaugeConfigArray[5]) + '');

                //CPO

                if (cpoGaugeConfigArray.length == 0) {
                    cpoGaugeConfigArray = result.data.row[5].column;
                    renderGaugeCPO();
                } else {
                    dialChartCPO.redraw(Number(cpoGaugeConfigArray[2]), 500);
                }

                $('#cpo-value-info').empty();
                $('#cpo-value-info').append(Number(cpoGaugeConfigArray[2]) + '');

                $('#cpo-updown-info').empty();
                $('#cpo-updown-info').append(Number(cpoGaugeConfigArray[5]) + '');

                //INDO

                if (indoGaugeConfigArray.length == 0) {
                    indoGaugeConfigArray = result.data.row[11].column;
                    renderGaugeINDO();
                } else {
                    dialChartINDO.redraw(Number(indoGaugeConfigArray[2]), 500);
                }

                $('#indo-value-info').empty();
                $('#indo-value-info').append(Number(indoGaugeConfigArray[2]) + '');

                $('#indo-updown-info').empty();
                $('#indo-updown-info').append(Number(indoGaugeConfigArray[5]) + '');

                //UST

                if (ustGaugeConfigArray.length == 0) {
                    ustGaugeConfigArray = result.data.row[10].column;
                    renderGaugeUST();
                } else {
                    dialChartUST.redraw(Number(ustGaugeConfigArray[2]), 500);
                }

                $('#ust-value-info').empty();
                $('#ust-value-info').append(Number(ustGaugeConfigArray[2]) + '');

                $('#ust-updown-info').empty();
                $('#ust-updown-info').append(Number(ustGaugeConfigArray[5]) + '');

                //CDS

                if (cdsGaugeConfigArray.length == 0) {
                    cdsGaugeConfigArray = result.data.row[12].column;
                    renderGaugeCDS();
                } else {
                    dialChartCDS.redraw(Number(cdsGaugeConfigArray[2]), 500);
                }

                $('#cds-value-info').empty();
                $('#cds-value-info').append(Number(cdsGaugeConfigArray[2]) + '');

                $('#cds-updown-info').empty();
                $('#cds-updown-info').append(Number(cdsGaugeConfigArray[5]) + '');

                //SUN5

                if (sun5GaugeConfigArray.length == 0) {
                    sun5GaugeConfigArray = result.data.row[6].column;
                    renderGaugeSUN5();
                } else {
                    dialChartSUN5.redraw(Number(sun5GaugeConfigArray[2]), 500);
                }

                $('#sun5-value-info').empty();
                $('#sun5-value-info').append(Number(sun5GaugeConfigArray[2]) + '');

                $('#sun5-updown-info').empty();
                $('#sun5-updown-info').append(Number(sun5GaugeConfigArray[5]) + '');

                //SUN10

                if (sun10GaugeConfigArray.length == 0) {
                    sun10GaugeConfigArray = result.data.row[7].column;
                    renderGaugeSUN10();
                } else {
                    dialChartSUN10.redraw(Number(sun10GaugeConfigArray[2]), 500);
                }

                $('#sun10-value-info').empty();
                $('#sun10-value-info').append(Number(sun10GaugeConfigArray[2]) + '');

                $('#sun10-updown-info').empty();
                $('#sun10-updown-info').append(Number(sun10GaugeConfigArray[5]) + '');

            }

        });

    }

    function getIDRLineData() {

        $.getJSON('http://mdashboard.fiskal.depkeu.go.id/source/api/chart/xml_build/id/line-idr', function(result) {

            if (result.success == 'true') {

                lineIDRLabels = [];
                lineIDRValues = ['IDR'];

                for (i=0; i<result.data.row.length; i++) {

                    if (result.data.row[i].column[4] == '.') {

                        lineIDRLabels.push('');

                    } else {

                        lineIDRLabels.push(result.data.row[i].column[4].substring(0,5));

                    }                  

                    if (result.data.row[i].column[5] > 0) {

                        lineIDRValues.push(result.data.row[i].column[5]);

                    }

                }

                if (lineChartIDR == false) {

                    renderLineIDR();            

                } else {

                    lineChartIDR.load({
                        columns: [
                            lineIDRValues
                        ]
                    });

                }

            }

        });

    }

    function getIHSGLineData() {

        $.getJSON('http://mdashboard.fiskal.depkeu.go.id/source/api/chart/xml_build/id/line-ihsg', function(result) {

            if (result.success == 'true') {

                lineIHSGLabels = [];
                lineIHSGValues = ['IHSG'];

                for (i=0; i<result.data.row.length; i++) {

                    if (result.data.row[i].column[4] == '.') {

                        lineIHSGLabels.push('');

                    } else {

                        lineIHSGLabels.push(result.data.row[i].column[4].substring(0,5));

                    }                  

                    if (result.data.row[i].column[5] > 0) {

                        lineIHSGValues.push(result.data.row[i].column[5]);

                    }

                }

                if (lineChartIHSG == false) {

                    renderLineIHSG();            

                } else {

                    lineChartIHSG.load({
                        columns: [
                            lineIHSGValues
                        ]
                    });

                }

            }

        });

    }

    function getTickerData() {

        $.getJSON('http://mdashboard.fiskal.depkeu.go.id/source/api/chart/xml/id/ticker', function(result) {

            if (result.success == 'true') {

                tickerText = '';

                for (i=0; i<result.data.row.length; i++) {

                    if ((Math.round((result.data.row[i].column[2] - result.data.row[i].column[1]) * 100) / 100) > 0) {

                        plusMinus = '&nbsp;<span style="color: #37e564;"><span style="font-size: 85%;" class="glyphicon glyphicon-arrow-up"></span> ' + (Math.round((result.data.row[i].column[2] - result.data.row[i].column[1]) * 100) / 100) + '</span>';

                    } else if ((Math.round((result.data.row[i].column[2] - result.data.row[i].column[1]) * 100) / 100) < 0) {

                        plusMinus = '&nbsp;<span style="color: #FF6666;"><span style="font-size: 85%;" class="glyphicon glyphicon-arrow-down"></span> ' + String(Math.round((result.data.row[i].column[2] - result.data.row[i].column[1]) * 100) / 100).substring(1) + '</span>';

                    }

                    tickerText += result.data.row[i].column[0] + ": " + result.data.row[i].column[2] + " " + plusMinus + " &nbsp; &nbsp; &nbsp;";

                }

                $('#ticker-text-a').html(tickerText);
                $('#ticker-text-b').html(tickerText);

            }

        });

    }

    function retrieveData() {

        getTickerData();

        getStocksData();
        getForexData();

        getMultiGaugeData();

        setTimeout(function() {

            getIDRLineData();
            getIHSGLineData();

        }, 1000);

    }

    function arrangePage() {

        lineArrange();

        renderGaugeIDR();
        renderGaugeIHSG();

        renderGaugeCoal();
        renderGaugeWTI();
        renderGaugeGas();
        renderGaugeGold();
        renderGaugeWheat();
        renderGaugeCPO();

        renderGaugeINDO();
        renderGaugeUST();
        renderGaugeCDS();

        renderGaugeSUN5();
        renderGaugeSUN10();

        renderLineIDR();
        renderLineIHSG();

    }

    function checkForArrange() {

        if (previousHeight != currentHeight) {

            arrangePage();

        }

    }

    function slideTicker() {

        if ($('#ticker-content').css('left') == 'auto') {

            $('#ticker-content').css('left', '0');

        } else {

            $('#ticker-content').css('left', '-=1');

        }

        leftProp = $('#ticker-content').css('left');

        leftProp = leftProp.substring(0, leftProp.length - 2);

        if (Number(leftProp) < ($('#ticker-text-a').innerWidth() * -1)) {

            $('#ticker-content').css('left', '0');

        }

    }
    
    $(document).ready(function() {

        if (($(window).innerWidth() >= 1200) && ($(window).innerWidth() <= 1600)) {

            $('#multi-block').css('font-size', '70%');
            $('#idr-gauge').css('font-size', '70%');
            $('#ihsg-gauge').css('font-size', '70%');

        }

        lineArrange();
        retrieveData();

    });

    $(window).resize(function() {

        arrangePage();

    });

    var apiRepeater = setInterval(function() {

        retrieveData();

    }, 10000);

    var tickerRepeater = setInterval(function() {

        slideTicker();

    }, 30);

</script>